<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="car-management" content="车辆，管理系统">
    <link rel="icon" href="img/car1.png" type="image/x-icon">
    <script type="text/javascript" src="js/flexible.js"></script>
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <title>历史行驶轨迹</title>
    <style>
        html {
            width: 100%;
            height: 100%;
        }

        body {
            width: 100%;
            height: 100%;
        }

        #map {
            width: 100%;
            height: 100%;
        }
        * {
            margin: auto;
            padding: 0px;
        }

        #div1 {
            width: 500px;
            margin: 0px auto;
            border: 2px solid black;
            z-index: 5;
            position: absolute;
            background-color: azure;
            right: 1%;
            top: 5%;
        }

        header {
            margin: 0px;
            height: 35px;
            background-color: blue;
            font-size: 25px;
            text-align: center;
        }

        .span1 {
            float: left;
        }

        .span2 {
            float: right;
        }

        header span {
            color: white;
            cursor: pointer;
        }

        table {
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }

        table th,
        td {
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            border-top: 1px solid #ccc;
            text-align: center;
            height: 30px;
        }
    </style>
</head>
<body style="display: inline;">
    <div id="map">
        <!-- <div id="date_select">
        </div> -->
        <div id="div1">
            <header>
                <span class="span1">
                    << </span>
                        <span class="span2"> >> </span>
                        <div class="div1_1"></div>
            </header>
        </div>
    </div>

</body>
<script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=89540bb74b1cadbaaa8eb8ba17aec581"></script>
<script type="text/javascript" src="../config.js"></script>
<script type="text/javascript">
    document.title = localStorage.getItem("car_id")
    let car_his = {} 
    let line = {}
    let passline = {}
    let map = new AMap.Map('map', {
        zoom: 16,
        zooms: [14, 18],
        center: [106.468485,29.56619],
        zIndex: -1
    });
    //传入年月，返回当前月的号数以及1号的星期时间
    function getTime(year, month) {
        return {
            AllDays: new Date(year, month, 0).getDate(),
            FirstWeek: new Date(year, month - 1, 1).getDay(),
        }
    }
    $(function () {
        var time = new Date();//定义当前时间
        var YearAndMonth = $('.div1_1');//找到显示时间模块的div
        var AllTd = [];
        AddTime();
        ShowTime();
        function AddTime() {//创建时间表格
            var table = $(`
                    <table width="100%">
                    <thead>
                    <tr>
                    <th style="color:red">日</th>
                    <th >一</th>
                    <th >二</th>
                    <th>三</th>
                    <th >四</th>
                    <th>五</th>
                    <th >六</th>
                    </tr>
                   </thead>
                   <tbody>
				   </tbody>
                    </table>
                   `)
            $('#div1').append(table);//把table表格加入到div中，默认在header后面
            var tbody = table.find('tbody');//找到表格中的tbody部分
            for (var i = 0; i < 6; i++) {//创建6行表格
                var tr = $('<tr></tr>');
                for (var j = 0; j < 7; j++) {//在每一行tr中加入7个单元格
                    var td = $('<td></td>');
                    tr.append(td);
                    AllTd.push(td);//把所有td放入集合AllTd中
                }
                tbody.append(tr);
            }
        }
        function ShowTime() { //在每个单元格显示日期顺序index
            var year = time.getFullYear();
            var month = time.getMonth() + 1;
            YearAndMonth.text(`${year}年${month}月`);
            var GetTime = getTime(year, month);//把当前月份返回的总日数和开头周一日期放进变量中

            $.each(AllTd, function (index, element) {//对每一个td进行function方法遍历
                element.empty();//先清空之前的日期数，防止不同月份日期数冲突
                if (index >= GetTime.FirstWeek && index < GetTime.AllDays + GetTime.FirstWeek) {//index从0开始增加，至到月底数，总数为月日期总数+开始到月1号的数目
                    element.text(index - GetTime.FirstWeek + 1);//当前日期顺序数为当前index数-周期数
                }
            })
            if (AllTd[35].text() == "") {//AllTd[35]为最后一行日期开头下标
                AllTd[35].parent().hide();
            }
            else {
                AllTd[35].parent().show();
            }
        }
        $('#div1 span').click(function () {
            var year = time.getFullYear();
            var month = time.getMonth();

            if ($(this).index() == 0) {//span只有2个，则index分别为0,1
                month--;
            } else {
                month++;
            }
            time = new Date(year, month);
            ShowTime();
        })
    })

    window.onload = () => {
        let ip = global_config["ip"]
        let api_port_path = global_config["api_port_path"]
        let api_port_1 = global_config["api_port_1"]
        let car_run = {}
        let car_paths = {}
        let car_v = 30

        $('tbody').click((e) => {
            let date = $(".div1_1").text()
            let time = new Date()
            let year = time.getFullYear();
            let month = time.getMonth() + 1;
            let day = e.target.innerHTML
            let car_id = localStorage.getItem("car_id")
            let url = ip + ":" + api_port_1 + "/get_car_paths/" + car_id + "," + year + "年" + month + "月" + day
            if (day < 31 || day > 0) {
                fetch(url, {
                    method: "GET"
                }).then(res => {
                    return res.json()                
                }).then(res => {
                    console.log(res);
                    $("td").css("background", "")
                    for(let i in car_his){
                        if (i !== day){
                            car_his[i].setMap(null)
                            line[i].setMap(null)
                            passline[i].setMap(null)
                            console.log(i);
                        }
                    }
                    e.target.style.background = "red";
                    car_his[day] = new AMap.Marker({
                        map: map,
                        position: res[0],
                        icon: new AMap.Icon({
                            size: new AMap.Size(52, 26),    // 图标尺寸
                            image: 'img/car3.png',  // Icon的图像
                            imageOffset: new AMap.Pixel(0, 0),  // 图像相对展示区域的偏移量，适于雪碧图等
                            imageSize: new AMap.Size(40, 20),   // 根据所设置的大小拉伸或压缩图片
                        }),
                        offset: new AMap.Pixel(-20, -10),
                        title: "车牌号:" + car_id,
                        autoRotation: true,
                        // angle:90,
                    })
                    line[day] = new AMap.Polyline({
                        map: map,
                        path: res,
                        showDir: true,
                        strokeColor: "#28F",  //线颜色
                        // strokeOpacity: 1,     //线透明度
                        strokeWeight: 6,      //线宽
                        // strokeStyle: "solid"  //线样式
                    });

                    passline[day] = new AMap.Polyline({
                        map: map,
                        // path: lineArr,
                        strokeColor: "green",  //线颜色
                        // strokeOpacity: 1,     //线透明度
                        strokeWeight: 6,      //线宽
                        // strokeStyle: "solid"  //线样式
                    });
                    car_his[day].on('moving', function (e) {
                        passline[day].setPath(e.passedPath);
                    });                   
                    map.setFitView();
                    car_his[day].moveAlong(res, 1000);

                })
            }
        })
    }          
</script>

</html>